<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width:500px;
                height: 500px;
                background:red;
            }
        </style>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("#hide").click(function () {
                    // $(".c1").hide();//隐藏
                    // $(".c1").hide(3000);
                    // $(".c1").fadeOut(2000);//淡出
                    $(".c1").slideUp(2000);//上滑
                });
                $("#show").click(function () {
                    // $(".c1").show(3000);//显示
                    // $(".c1").fadeIn(3000);//淡入
                    $(".c1").slideDown(2000);//下滑

                });
                $("#hs").click(function () {
                    // $(".c1").toggle(2000);//隐藏或者显示
                    // $(".c1").fadeToggle(2000);//淡入或者淡出

                    // 在指定的毫秒数内，将元素的透明度逐渐的达到指定的透明度
                    // $(".c1").fadeTo(1000,0.5);

                    $(".c1").slideToggle(1000);//上滑或者下滑
                });
            });
        </script>

    </head>
    <body>
        <input type="button" id="hide" value="隐藏">
        <input type="button" id="show" value="显示">
        <input type="button" id="hs" value="隐藏或者显示">
        <div class="c1">
            <p>第1个段落</p>
            <p>第2个段落</p>
            <p>第3个段落</p>
            <p>第4个段落</p>
            <p>第5个段落</p>
        </div>
    </body>
</html>